import React from "react";
import Chart from "echarts-for-react";
import request from '../../../utils/request';
import echarts from 'echarts'

 
var dataLQ = [
    {
        value:[32.63, 140, 1130, 2,140,140, "实际"],
        lineStyle:{
            normal: {
                width: 3.5,
                opacity: 1
            }
        }
    },
    {
        value:[12.63, 1420, 11430, 9.2,140,140, "标准"],
        lineStyle:{
            normal: {
                type:'dashed',
                color:"yellow",
                width: 1.5,
                opacity: 1
            }
        }
    }
    
    
];

var dataJN = [
    
    {
        value:[7.28, 11234, 11000, 3.9,140,140, "实际"],
        lineStyle:{
            normal: {
                width: 3.5,
                opacity: 1
            }
        }
    },
    
    {
        value:[12.63, 1420, 11430, 9.2,140,140, "标准"],
        lineStyle:{
            normal: {
                type:'dashed',
                color:"yellow",
                width: 1.5,
                opacity: 1
            }
        }
    }
];

var dataQY 


var schema = [{
    name: 'date',
    index: 0,
    text: '镉'
},
{
    name: 'AQIindex',
    index: 1,
    text: '镍'
},
{
    name: 'PM25',
    index: 2,
    text: '铅'
},
{
    name: 'PM10',
    index: 3,
    text: 'TSP'
},
{
    name: 'CO',
    index: 4,
    text: 'PM10'
},
{
    name: 'CO',
    index: 5,
    text: 'PM2.5'
},
{
    name: 'CO',
    index: 6,
    text: '等级'
}
];

var lineStyle = {
    normal: {
        width: 2.5,
        opacity: 1
    }
};

var colors = ['#3366cc', '#dc3912', '#ff9900'];


var legendName = ['2019年6月1号', '2019年6月2号', '2019年6月3号'];
var selectedStr = { "2019年6月1号": true, "2019年6月2号": false, "2019年6月3号": false };
var timeval6
class LeftBottom extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: ''
        }




    }


    componentWillMount() {
        request({
            url: `/web/redstar/cockpitport/thirdPartyDetection`,
            method: 'POST',
            data: {}

        }).then(data => {
            // console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
                
                let echarts_instance = this.echarts_react.getEchartsInstance();
                var index = 1;
        

                timeval6 =  setInterval(() => {
                    var option1 = echarts_instance.getOption();
                   
                    var selected = {};
                    var legendData = option1.legend[0].data;
                   
                    for (var i = 0; i < legendData.length; i++) {    // this.legendData是legend中data的值，上面是写死的值，做自动切换时不要写死
                        if (index == i) {
                            selected[legendData[i]] = true;
                        } else {
                            selected[legendData[i]] = false;
                        }
                    }
        
                    
                    option1.legend[0].selected = selected;
        
                    setTimeout(() => {
                       
                        echarts_instance.setOption(option1);
                    })
                   
        
                    index += 1;
                    if (index == legendData.length) {
                        index = 0;
                    }
                },10000)
              
            }
        })



       
       
        // // then you can use any API of echarts.
        // let base64 = echarts_instance.getDataURL();
        // console.log(base64, echarts_instance)
    }

    



    onsave = () => {
      
    }

    componentWillUnmount(){
        clearInterval(timeval6)
    }

    setOption = () => {
        let myOption;
        let data = this.state.disList
        // console.log(data)
         return {
            color: colors,
            backgroundColor: '#000',

            legend: {
                type:'scroll',
                bottom: 0,
                itemGap:2,//间距
                itemWidth:10,//图形标记宽度
                itemHeight:10,//高度
                selectedMode: "single",
                data: data.legendName,
                selected: data.selectedStr,
                textStyle: {
                    color: '#ccc',
                    fontSize: 10
                }
            },
            tooltip: {
                padding: 8,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj[0].value;
                    return +schema[0].text + '：' + value[1] + '<br>' +
                        schema[1].text + '：' + value[1] + '<br>' +
                        schema[2].text + '：' + value[2] + '<br>' +
                        schema[3].text + '：' + value[3] + '<br>';
                }
            },
            // dataZoom: {
            //     show: true,
            //     orient: 'vertical',
            //     parallelAxisIndex: [0]
            // },
            parallelAxis: [{
                dim: 0,
                name: schema[0].text,
                inverse: false,
                nameLocation: 'end'
            },
            {
                dim: 1,
                name: schema[1].text
            },
            {
                dim: 2,
                name: schema[2].text
            },
            {
                dim: 3,
                name: schema[3].text
            },
            {
                dim: 4,
                name: schema[4].text
            },
            {
                dim: 5,
                name: schema[5].text
            },
           

            {
                dim: 6,
                name: schema[6].text,
                type: 'category',
                data: ['实际', '标准']
            }
            ],
            parallel: {
                top:"18%",
                left: '10%',
                right: '15%',
                bottom: 30,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 15,
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#777'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            },

            series: [{
                name: data  && data.value1?data.value1.name:"",
                type: 'parallel',
                lineStyle: lineStyle,
                data: [
                    {
                        value:data   && data.value1?data.value1.value:[],
                        lineStyle:{
                            normal: {
                                width: 3.5,
                                opacity: 1
                            }
                        }
                    },
                    {
                        value:data   && data.value1?data.standard:[],
                        lineStyle:{
                            normal: {
                                type:'dashed',
                                color:"yellow",
                                width: 1.5,
                                opacity: 1
                            }
                        }
                    }
                    
                    
                ]
            },
            {
                name: data  && data.value2?data.value2.name:"",
                type: 'parallel',
                lineStyle: lineStyle,
                data: [
                    {
                        value:data && data.value2?data.value2.value:[],
                        lineStyle:{
                            normal: {
                                width: 3.5,
                                opacity: 1
                            }
                        }
                    },
                    
                    {
                        value: data  && data.value2?data.standard:[],
                        lineStyle:{
                            normal: {
                                type:'dashed',
                                color:"yellow",
                                width: 1.5,
                                opacity: 1
                            }
                        }
                    }
                    
                   
                ]
            },
            {
                name: data && data.value3?data.value3.name:"",
                type: 'parallel',
                lineStyle: lineStyle,
                data: [
    
                    {
                        value:data && data.value3?data.value3.value:[],
                        lineStyle:{
                            normal: {
                                width: 3.5,
                                opacity: 1
                            }
                        }
                    },
                    
                    {
                        value:data && data.value3?data.standard:[],
                        lineStyle:{
                            normal: {
                                type:'dashed',
                                color:"yellow",
                                width: 1.5,
                                opacity: 1
                            }
                        }
                    }
                ]
            },


            ]
        }

       
    }


    onChartLegendselectchanged = (obj) => {
        // console.log(obj)
        var selected = obj.selected;
        // console.log(selected);
        var legend = obj.name;
        // console.log(legend);
    }



    render() {
        const onEvents = {
            'click': this.onChartClick,
            'legendselectchanged': this.onChartLegendselectchanged
        }


        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "90%", width: "100%", float: "left" }}
                // echartsInstance={this.save}
                ref={(e) => { this.echarts_react = e; }}
                onEvents={onEvents}
            />




        );
    }

}

export default LeftBottom;
